<template>
  <div class="details">
    <!-- header -->
    <div class="header">
      <p>商品详情</p>
    </div>
    <!-- 两个按钮块 -->
    <div id="icon-box">
      <div class="icon-left" @click="goback">
        <van-icon name="arrow-left" size="24" />
      </div>
      <div class="icon-right" @click="gocart">
        <van-icon name="shopping-cart-o" size="24" />
      </div>
    </div>
    <!-- 滑块 -->
    <van-swipe :loop="false" :width="280" :style="{justifyContent:(isCenter?'center':'')}">
      <van-swipe-item v-for="(imgs,index) in datalist.imgsData" :key="index">
        <img :src="imgs.pro_img_url" alt="">
      </van-swipe-item>
      <!-- <van-swipe-item>4</van-swipe-item> -->
    </van-swipe>
    <!-- 价格标题 -->
    <div class="content">
      <div class="price">
        <span>￥</span>
        <span>{{datalist.p_price_cur}}</span>
        <div class="price-right">
          <span style="text-decoration: line-through">￥{{datalist.p_price_old}}</span>
          <div class="price-icon">
            <span>折扣</span>
          </div>
        </div>
      </div>
      <div class="title">
        <p>{{datalist.p_title}}</p>
        <div class="right">
          <van-icon name="user-o" />
          <span>帮我选</span>
        </div>
        <div class="position">
          <span>免邮费</span>
          <span>湖南长沙</span>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <van-goods-action>
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-icon icon="chat-o" text="客服" color="#ff5777" />
      <van-goods-action-icon icon="star-o" text="收藏" />
      <van-goods-action-button type="warning" text="加入购物车" @click="show.flag=!(show.falg)" />
      <van-goods-action-button type="danger" text="立即购买" @click="show.flag=!(show.falg)" />
    </van-goods-action>
    <Sku :show="show"></Sku>
    <!-- content -->
    <div id="content-promise">
      <span>
        <van-icon name="passed" color="rgb(250,73,71)" />
        72小时发货
      </span>
      <span>
        <van-icon name="passed" color="rgb(250,73,71)" />
        7天无理由退货
      </span>
      <span>
        <van-icon name="passed" color="rgb(250,73,71)" />
        延误必赔
      </span>
      <span>
        <van-icon name="arrow" />
      </span>
    </div>
    <!-- 优惠券 -->
    <div id="content-paper">
      <div class="paper-left">
        <van-icon name="fire-o" color="rgb(250,73,71)" />
        开通白付美，0首付，可分期！
      </div>
      <div class="paper-right">
        <span>免费开通</span>
        <van-icon name="arrow" style="margin-top: 5px;margin-left: 6px;" />
      </div>
    </div>
    <!-- 买家评论 -->
    <div id="comment">
      <div class="comment-num">
        <span>买家评论 3</span>
        <van-icon name="arrow" />
      </div>
      <ul>
        <li>
          <div>
            <div class="img">
              <img src="https://s5.mogucdn.com/mlcdn/5abf39/190127_7jl7jb1067c91khj4g44gcbhb1g45_132x132.jpg_48x48.webp"
                alt="">
            </div>
            <span class="user">芳cue思瑶</span>
          </div>
          <p class="txt">“做工满意”“款式好看”“卖家服务很好”“质量好”“没有气味”“没有色差”“图片描述一致”“没有线头”衣服很合身，蕾丝部分做工很考究，没有廉价的感觉，内衬很舒服，马上入秋很适合入手。</p>
          <div class="time">2019-08-06</div>
        </li>

      </ul>
    </div>
  </div>
</template>
<script>
  import Sku from '@/components/Sku'
  export default {
    data: () => ({
      show: {
        flag: false,
        price: 66,
        url: '',
        data: ''
      },
      // price: 66,
      datalist: [],
      isCenter: false,
      length: 1
    }),
    created() {
      console.log(this.show.url)
      this.GetProductDetail(this.$route.params.id)
      this.change()
    },
    methods: {
      async GetProductDetail(id) {
        try {
          const {
            data
          } = await this.$Api.apiDetails.GetProductDetail(
            id
          )
          this.show.data = data[0]
          this.datalist = data[0]
          this.show.url = this.datalist.imgsData[0].pro_img_url
          this.length = this.datalist.imgsData.length
          this.show.price = parseInt(this.datalist.p_price_cur)
        } catch (error) {
          this.$Toast(error)
        }
      },
      goback() {
        window.history.back()
      },
      gocart() {
        this.$router.push('/cart')
      },
      change() {
        if (this.length >= 1) {
          this.isCenter = false
        } else {
          this.isCenter = true
        }
      },
      showMsg() {
        this.show.flag = !this.show.flag
        this.show.price = parseInt(this.datalist.p_price_cur)
      }
    },
    mounted() {
      this.change()
    },
    components: {
      Sku
    }
  }

</script>
<style lang="less">
  .header {
    text-align: center;
    line-height: 40px;
    height: 40px;
    background: #fafafa;
    border-bottom: 1px solid #c9c7c8;

    p {
      margin: 0;
      color: #5e5e5e;
    }
  }

  .details {
    background: rgb(234, 234, 234);
    padding-bottom: 40px;
  }

  /* 价格标题 */
  .content {
    background: white;
    padding: 10px;
  }

  .price {
    display: flex;

    span:nth-of-type(1) {
      margin-top: 2px;
    }
  }

  .price span:nth-child(2) {
    font-size: 36px;
  }

  .price-right {
    margin-left: 6px;
    margin-top: 2px;
  }

  .price-right>span {
    color: #ccc;
    font-size: 12px;
  }

  .price-icon {
    background: rgb(255, 232, 238);
    width: 30px;
    /* margin-top: 4px; */

    span {
      font-size: 12px;
      color: rgb(255, 34, 85);
    }
  }

  .title {
    margin: 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    p {
      margin: 0;
      width: 80%;
    }

    .position {
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #ccc;
      margin-top: 6px;
      padding-right: 6px;
    }

    .right {
      padding: 0.2rem .5rem;
      display: flex;
      align-items: center;
      background: #f8f8f8;
      height: 1.5rem;
      border-top-left-radius: .5rem;
      border-bottom-left-radius: .5rem;

      span {
        text-align: center;
        font-size: 12px;
        color: #999;
      }
    }
  }

  #content-promise {
    line-height: 40px;
    height: 40px;
    background: white;
    margin: 10px 0;
    padding: 0 10px;

    span {
      font-size: 12px;
      color: #666;
      margin-right: 16px;
      display: inline-block;
    }

    span:nth-last-child(1) {
      float: right;
      margin: 0;
      margin-top: 4px;
    }
  }

  #content-paper {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    height: 20px;
    margin: 10px 0;
    background: white;
    margin-bottom: 10px;
    line-height: 20px;
    padding: 10px;
    color: #666;
  }

  /* 评论 */
  #comment {
    background: white;
    padding: 10px;
    margin-bottom: 10px;

    .comment-num {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #999;
      margin: 10px 0;
    }
  }

  #comment ul li {
    margin-top: 10px;
    border-bottom: 1px solid #ccc;
  }

  #comment ul li:nth-last-child(1) {
    border-bottom: none;
  }

  #comment ul div {
    display: flex;
    align-items: center;

    .img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 10px;

      img {
        width: 30px;
        height: 30px;
      }
    }
  }

  .txt {
    margin: 6px 0;
    text-align: justify;
  }

  .time {
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
  }

  .van-swipe {
    background: white;
    display: flex;
  }

  .van-swipe .van-swipe__track {
    display: flex;
    justify-content: space-around;
  }

  .van-swipe .van-swipe-item {
    width: 100%;
    text-align: center;
    height: 380px;
    /* background: lightblue; */
    padding: 10px 0px;
  }

  .van-swipe .van-swipe-item img {
    width: 260px;
    height: 100%;
  }

  .van-swipe .van-swipe__indicators {
    display: none;
  }

  .details {
    .van-goods-action {
      height: 40px;

      .van-goods-action-icon:nth-of-type(2) {
        color: red;
      }
    }
  }

  .van-goods-action button {
    height: 40px;
  }

  .van-button__content span {
    color: white;
  }

  /* 滑块左右的icon */
  #icon-box {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 0;
    padding: 0.3rem;
    width: 100%;
    z-index: 666;

    div {
      display: inline-block;
    }
  }

  #icon-box .icon-left {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, .4);
    border-radius: 50%;
    text-align: center;
    color: white;

    i {
      line-height: 40px;
    }
  }

  #icon-box .icon-right {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, .4);
    border-radius: 50%;
    text-align: center;
    color: white;

    i {
      line-height: 40px;
    }
  }

  .van-goods-action {
    z-index: 666;
  }

</style>
